<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f0f0f0;
        }

        .test-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .zoom-controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background: #007bff;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background: #0056b3;
        }

        .current-info {
            background: #e7f3ff;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #007bff;
        }

        iframe {
            width: 100%;
            height: 600px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <h1>15.4英寸(2880×1800)屏幕响应式测试</h1>

    <div class="current-info">
        <h3>当前屏幕信息：</h3>
        <p>屏幕分辨率: <span id="screenRes"></span></p>
        <p>视口大小: <span id="viewportSize"></span></p>
        <p>设备像素比: <span id="dpr"></span></p>
        <p>当前缩放: <span id="currentZoom">1.0</span></p>
    </div>

    <div class="test-container">
        <h3>缩放调整控制</h3>
        <div class="zoom-controls">
            <button onclick="setZoom(0.9)">0.9x</button>
            <button onclick="setZoom(1.0)">1.0x (原始)</button>
            <button onclick="setZoom(1.1)">1.1x</button>
            <button onclick="setZoom(1.15)">1.15x</button>
            <button onclick="setZoom(1.2)">1.2x</button>
            <button onclick="setZoom(1.25)">1.25x</button>
            <button onclick="setZoom(1.3)">1.3x</button>
            <button onclick="openOriginal()">打开原页面</button>
        </div>
    </div>

    <div class="test-container">
        <h3>页面预览 (当前缩放: <span id="previewZoom">1.0</span>)</h3>
        <iframe id="preview" src="index.html"></iframe>
    </div>

    <script>
        // 显示屏幕信息
        function updateScreenInfo() {
            document.getElementById('screenRes').textContent =
                `${screen.width}×${screen.height}`;
            document.getElementById('viewportSize').textContent =
                `${window.innerWidth}×${window.innerHeight}`;
            document.getElementById('dpr').textContent =
                window.devicePixelRatio || 1;
        }

        // 设置缩放
        function setZoom(factor) {
            const iframe = document.getElementById('preview');
            iframe.style.transform = `scale(${factor})`;
            iframe.style.transformOrigin = 'top left';
            iframe.style.width = `${100 / factor}%`;
            iframe.style.height = `${600 / factor}px`;

            document.getElementById('currentZoom').textContent = factor.toFixed(1);
            document.getElementById('previewZoom').textContent = factor.toFixed(1);
        }

        // 打开原页面
        function openOriginal() {
            window.open('index.html', '_blank');
        }

        // 页面加载时更新信息
        updateScreenInfo();
        window.addEventListener('resize', updateScreenInfo);

        // 根据屏幕尺寸自动建议最佳缩放
        if (screen.width === 2880 && screen.height === 1800) {
            setTimeout(() => {
                alert('检测到2880×1800屏幕，建议尝试1.1x或1.15x缩放');
                setZoom(1.1);
            }, 1000);
        }
    </script>
</body>

</html>